<template>
  <div class="main">
    <div class="personal-info-box">
      <div class="myorder-person">
        <h3>基本信息</h3>
      </div>
      <div class="info-box">
        <div class="form-box">
          <el-form
            ref="ruleFormRef"
            :model="userInfoForm"
            :rules="rules"
            label-width="120px"
            class="ruleForm"
            :size="formSize"
            label-suffix=":"
          >
            <el-form-item label="用户名" prop="userId">
              <el-input v-model="userInfoForm.userId" disabled />
            </el-form-item>
            <el-form-item label="登录名" prop="email">
              <el-input v-model="userInfoForm.email" disabled />
            </el-form-item>
            <el-form-item label="昵称" prop="name">
              <el-input v-model="userInfoForm.name" @blur="nameHandleChange" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="userInfoForm.gender">
                <el-radio label="男" @change="genderHandleChange" />
                <el-radio label="女" @change="genderHandleChange" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="userInfoForm.birthday"
                type="date"
                placeholder="选择日期"
                @change="dataHandleChange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="userInfoForm.phone"
                placeholder="请输入内容"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="avater-box">
          <div class="info2-box">
            <div class="avater">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :http-request="imageUpload"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
              <i class="bianjiIcon iconfont icon-bianji_o"></i>
            </div>
            <div class="introduce">
              <h3>用户名：{{ userInfoForm.userId }}</h3>
              <h3>昵称：{{ userInfoForm.name }}</h3>
              <span>会员类型:{{ vipType }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
import { userInfo, updateUserInfo, uploadFile } from "@/api/user";
import defaultAvatarImg from "@/assets/image/avaterDemo.jpg";
export default {
  data() {
    return {
      token: "",
      fileList: [],
      defauluAvatar: defaultAvatarImg,
      headers: {
        Authorization: getToken(),
      },
      userInfoForm: {},
      vipType: "个人用户",
      imageFileTmpFormData: new FormData(),
      interfaceUrl: "",
    };
  },
  setup() {},
  mounted() {
    this.token = getToken();
    this.getUserInfo();
  },
  components: {
    Plus: Plus,
    Delete: Delete,
    ZoomIn: ZoomIn,
  },
  methods: {
    viewImg() {
      this.avaterDialogVisible = !this.avaterDialogVisible;
    },
    imageUpload() {
      uploadFile(this.imageFileTmpFormData).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.userInfoForm.avatar = res.url;
          updateUserInfo(this.userInfoForm).then((res) => {
            console.log(res);
            if (res.code === 0) {
              this.$message.success("修改成功");
              this.getUserInfo();
              this.$store.commit("setUserInfo", this.userInfoForm);
              window.location.reload();
            }
          });
        }
      });
    },
    handleAvatarSuccess(jsonData, file) {
      console.log(jsonData);
    },
    beforeAvatarUpload(file) {
      console.log(file);
      if (file) {
        this.imageFileTmpFormData.set("file", file);
      } else {
        return false;
      }
    },
    formatDate(dt) {
      console.log(dt);
      if (dt) {
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, "0");
        let date = dt.getDate().toString().padStart(2, "0");
        let hour = dt.getHours().toString().padStart(2, "0");
        let minute = dt.getMinutes().toString().padStart(2, "0");
        let second = dt.getSeconds().toString().padStart(2, "0");
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      } else {
        return;
      }
    },
    // 获取用户信息
    getUserInfo() {
      userInfo().then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.userInfoForm = res.user;
        }
      });
    },
    // 监听日期变化实时更新
    dataHandleChange(value) {
      console.log(value);
      let brithday = this.formatDate(value);
      this.userInfoForm.birthday = brithday;
      updateUserInfo(this.userInfoForm).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$message.success("修改成功");
          this.getUserInfo();
          this.$store.commit("setUserInfo", this.userInfoForm);
        }
      });
    },
    // 监听性别数据更新
    genderHandleChange(value) {
      console.log(value);
      this.userInfoForm.gender = value;
      updateUserInfo(this.userInfoForm).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$message.success("修改成功");
          this.getUserInfo();
          this.$store.commit("setUserInfo", this.userInfoForm);
        }
      });
    },
    nameHandleChange() {
      let msg = "你确定要修改成此昵称?";
      // 弹出一个框，用来提示用户是否确定删除
      this.$confirm(msg, "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          updateUserInfo(this.userInfoForm).then((res) => {
            console.log(res);
            if (res.code === 0) {
              this.$message.success("修改成功");
              this.getUserInfo();
              this.$store.commit("setUserInfo", this.userInfoForm);
            }
          });
        })
        .catch(() => {
          console.log("cancel");
        });
    },
  },
  computed: {
    imageUrl() {
      if (this.userInfoForm.avatar) {
        return this.userInfoForm.avatar;
      } else {
        return this.defauluAvatar;
      }
    },
  },
};
</script>
<style lang="scss">
.main {
  position: relative;

  .personal-info-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    .myorder-person {
      margin: 20px 430px;
      padding: 0 30px;
      width: 870px;
      height: 50px;
      background-color: #fff;
      display: flex;
      align-items: center;
    }
    .info-box {
      background-color: #fff;
      display: flex;
      height: 620px;
      width: 870px;
      .form-box {
        display: flex;
        justify-content: center;
        margin: 40px 5px;
        width: 500px;
        .el-form-item {
          margin: 20px 0;
        }
        .el-button {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 0;
          background-color: #244d4d;
          color: #fff;
          width: 100%;
          font-weight: 700;
          margin-top: 40px;
        }
      }
      .avater-box {
        width: 400px;
        .info2-box {
          display: flex;
          overflow: hidden;
          width: 350px;
          float: left;
          margin: 42px 0 0 20px;
          height: 120px;
          padding: 10px 0;
          color: #666;
          line-height: 20px;
          .avater {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            margin-right: 10px;
            .el-upload {
              border: 0;
              img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
              }
            }
            .bianjiIcon {
              position: absolute;
              bottom: 3px;
              right: 6px;
              height: 25px;
              width: 25px;
              background-color: #244d4d;
              color: #fff;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .introduce {
            flex: 1;
            display: flex;
            flex-direction: column;
            h3 {
              font-size: 14px;
              font-weight: bold;
              margin: 3px 0;
            }
            span {
              font-size: 14px;
              margin: 3px 0;
            }
          }
        }
      }
    }
  }
  .el-dialog {
    .avaterUploadBox {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
